<template>
  <!-- 搜索页面 -->
  <div class="result-container">
    <nav class="nav">
      <div class="img"><img :src="imgs" alt="" /></div>
      <div class="title-wrap">
        <!-- 标题 -->

        <h4><i>歌单</i> {{title}}</h4>
        <p>标签:
					<span v-for="i in tag" class="i">
            {{i}}
          </span>
				</p>

        <!-- <p>{{miusc}}</p> -->
        <p>歌曲:{{Count}}</p>
        <p>播放:{{playCount}}</p>
        <p>简介:{{Introduction}}</p>
      </div>
    </nav>
  </div>
</template>
<script>
import { API } from "../../common/constant";
import axios from "axios";
export default {
  data() {
    return {
      ids: "",
      // 标题
      title: "",
      //  图片
      imgs: "",
      // 歌曲
      song: "",
      // 标签
      tag: [],
      // 音乐url id
      urlId: [],
      // 简介
      Introduction: [],
      // 歌曲数量
      Count: "",
      // 播放
      playCount: "",
    };
  },
  methods: {
    handleduv() {
      var id = this.$route.query.q;
      this.ids = id;
      axios
        .get(`${API}/playlist/detail`, {
          params: {
            id: this.ids,
          },
        })
        .then((res) => {
          console.log(res.data);
          // 标题
          this.title = res.data.playlist.name;
          // 图片
          this.imgs = res.data.playlist.coverImgUrl;
          // trackIds歌曲
          this.song = res.data.playlist.trackIds;
          // 标签
          this.tag = res.data.playlist.tags;
          // url
          this.urlId = res.data.playlist.tracks;
          // 音乐
          this.Count = res.data.playlist.trackCount;
          // this.tracks=res.data.playlist.tracks
          //播放
          if (res.data.playlist.playCount > 100000) {
            this.playCount =
              parseInt(res.data.playlist.playCount / 10000) + "万";
          }
          // 简介
          this.Introduction = res.data.playlist.description;
        });
    },
  },
  created() {
    this.handleduv();
  },
};
</script>
<style scoped>
/* 单曲 */
.result-container {
  position: absolute;
  top: 130px;
  left: 200px;
}
.items img {
  width: 100px;
  height: 100px;
}

.tab-bar .item {
  cursor: pointer;
  margin: 10px 15px;
}
.active {
  color: red;
}
.nav {
  display: flex;
}
.img img {
  width: 200px;
  height: 200px;
}
.title-wrap {
  margin-left: 20px;
}
i {
  font-style: normal;
  color: red;
}
.i {
  border: 1px red solid;
  margin-left: 20px;
}
</style>
